<template>
  <div>
    <div>
      <div
        class="bottom-popup-class bottom-popup"
        :class="showVisible ? 'bottom-popup-show' : ''"
        :style="[`background:${bg}`, `height:${height ? height + 'rpx' : ''}`]"
      >
        <div v-if="title != ''" class="bottom-popup-title">
          {{ title }}
        </div>
        <slot></slot>

        <div
          v-if="!closeHide"
          class="icon-cuo icon bottom-popup-close-btn"
          @click="close"
        ></div>
      </div>
      <div
        class="bottom-popup-mask"
        :class="showVisible ? 'bottom-popup-mask-show' : ''"
        v-if="mask"
        @click.stop="close"
      ></div>
    </div>
  </div>
</template>
  
  <script lang="ts">
export default {
  name: "bottom-popup",
};
</script>
  <script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import { useConfig } from "@/store";
import { diyThemeDataType } from "@/types";
const configStore = useConfig();
const props = withDefaults(
  defineProps<{
    title?: string;
    mask?: boolean;
    show?: boolean;
    bg?: string;
    height?: string | number;
    closeHide?: boolean;
  }>(),
  {
    title: "",
    mask: true,
    show: false,
    bg: "#ffffff",
    height: 0,
    closeHide: false,
  }
);

const showVisible = ref<boolean>(props.show);

const diyTheme = ref<diyThemeDataType>();

const open = () => {
  showVisible.value = true;
};

const close = () => {
  showVisible.value = false;
};

onMounted(() => {
  nextTick(() => {
    diyTheme.value = configStore.getDiyTheme;
  });
});

defineExpose({ open, close });
</script>
  
  <style >
.bottom-popup {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  transform-origin: center;
  transition: all 0.3s ease-in-out;
  min-height: 20rpx;
}

.bottom-popup-show {
  transform: translate3d(0, 0, 0);
  visibility: visible;
}

.bottom-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  /* right: 0; */
  height: 100%;
  width: 100%;
  /* bottom: 0; */
  background: rgba(0, 0, 0, 0.6);
  z-index: 96;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.bottom-popup-mask-show {
  opacity: 1;
  visibility: visible;
}
.bottom-popup-title {
  line-height: 80rpx;
  text-align: center;
  font-weight: bold;
  font-size: var(--base-size-default);
}
.bottom-popup-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 80rpx;
  height: 80rpx;
  border-radius: 80rpx;
  font-size: var(--base-size-default);
  line-height: 80rpx;
  text-align: center;
  color: #000;
  font-weight: bold;
}
</style>